<template>
  <xy-page>
    <div class="liverole">
      <div>讲师设置</div>
      <el-table :data="lecturer" style="width: 100%">
        <el-table-column label="头像" width="120" align="center">
          <template slot-scope="scope">
            <img :src="lecturer[scope.$index].lecturerImg" class="teacher-img"/>
          </template>
        </el-table-column>
        <el-table-column prop="lecturerNum" label="账号" width="150" align="center"></el-table-column>
        <el-table-column prop="lecturerName" label="呢称" width="150" align="center"></el-table-column>
        <el-table-column prop="lecturerTitle" label="头衔" width="150" align="center"></el-table-column>
        <el-table-column min-width="180">
          <template slot-scope="scope">
            <el-button class="fr" @click="changeTeacher(scope.row)" style="margin-right: -10px;">讲师设置</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="mgt40" style="height:40px;line-height:40px;">
        助教设置
        <el-button class="fr" @click="addAssistant">添加助教</el-button>
      </div>
      <xy-table :tableData="assistant" :loading="assistant.isLoading" @change="assistantList" >
        <el-table-column prop="lecturerImg" label="头像" width="120" align="center">
          <template slot-scope="scope">
            <img :src="assistant.list[scope.$index].assistantImg" class="liberole-img" style="line-height:23px; "/>
          </template>
        </el-table-column>
        <el-table-column prop="assistantNum" label="账号" width="150" align="center" ></el-table-column>
        <el-table-column prop="assistantPwd" label="密码" width="150" align="center"></el-table-column>
        <el-table-column prop="assistantName" label="呢称" width="150" align="center"></el-table-column>
        <el-table-column prop="assistantTitle" label="头衔" width="150" align="center"></el-table-column>
        <el-table-column label="操作" min-width="180" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="openUrl(scope.row)" >打开</el-button>
            <el-button type="text" v-clipboard:copy="assistant.list[scope.$index].cname" v-clipboard:success="onCopy" v-clipboard:error="onError">复制</el-button>
            <el-button type="text" @click="setAssistant(scope.row)">设置</el-button>
            <el-button type="text" @click="delAssistant(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </xy-table>
      <el-dialog title="助教设置" :visible.sync="dialogVisible" width="30%" :modal="false" :close-on-click-modal="false">
        <div class="set">
          <el-form :model="assistantForm" status-icon ref="assistantForm">
            <el-form-item label="助教头像:">
              <img :src="assistantForm.assistantImg" class="teacher-img">
              <div class="head-img">
                <xy-upload @uploadImage="assistantImg" :imgSize="2" accept="image/*" checkSuffix="jpg,jpeg,png">
                  <el-button type="text">更换头像</el-button>
                </xy-upload>
              </div>
            </el-form-item>
            <el-form-item label="助教昵称:">
              <el-input v-model="assistantForm.assistantName" clearable maxlength="15"></el-input>
            </el-form-item>
            <el-form-item label="助教头衔:">
              <el-input v-model="assistantForm.assistantTitle" clearable maxlength="8"></el-input>
            </el-form-item>
            <el-form-item label="助教密码:">
              <el-input v-model="assistantForm.assistantPwd" clearable maxlength="16" minlength="6"></el-input>
            </el-form-item>
            <el-form-item class="txtC">
              <el-button @click="updateAssistant">保存</el-button>
              <el-button @click="dialogVisible = false">取 消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
      <el-dialog title="讲师设置" :visible.sync="dialogVisible2" width="30%" :modal="false" :close-on-click-modal="false">
        <div class="set">
          <el-form :model="lecturerForm" status-icon ref="lecturerForm">
            <el-form-item label="讲师头像:">
              <img :src="lecturerForm.lecturerImg" class="teacher-img">
              <div class="head-img">
                <xy-upload @uploadImage="lecturerImg" :imgSize="2" accept="image/jpeg,image/png" checkSuffix="jpg,jpeg,png">
                  <el-button type="text">更换头像</el-button>
                </xy-upload>
              </div>
            </el-form-item>
            <el-form-item label="讲师昵称:">
              <el-input v-model="lecturerForm.lecturerName" clearable maxlength="15"></el-input>
            </el-form-item>
            <el-form-item label="讲师头衔:">
              <el-input v-model="lecturerForm.lecturerTitle" clearable maxlength="8"></el-input>
            </el-form-item>
            <el-form-item label="讲师密码:">
              <el-input v-model="lecturerForm.lecturerPwd" clearable maxlength="16" minlength="6"></el-input>
            </el-form-item>
            <el-form-item class="txtC">
              <el-button @click="setTeacher" :loading="loading">保存</el-button>
              <el-button @click="dialogVisible2 = false">取 消</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-dialog>
    </div>
  </xy-page>
</template>

<script>
export default {
  data() {
    return {
      lecturer: [],
      assistant: {
        isLoading: false,
        page: 1,
        size: 20,
        total: 0,
        list: []
      },
      isLoading:false,
      dialogVisible: false,
      dialogVisible2: false,
      assistantForm: {
        assistantImg: '',
        assistantPwd: '',
        assistantName: '',
        assistantTitle: '',
        assistantNum:''
      },
      lecturerForm: {
        //讲师弹窗
        lecturerImg: '',
        lecturerPwd: '',
        lecturerName: '',
        lecturerTitle: ''
      },
      submitItem: {},
      channelId:'',
      appId:'',
      loading:false,
      copyassistUrl:''
    };
  },
  methods: {
    lecturerImg(param){//获取上传图片
      this.lecturerForm.lecturerImg=param
    },
    assistantImg(param){//获取上传图片
      this.assistantForm.assistantImg=param
    },
    onCopy(){//复制成功提示
      this.$message.success('复制成功!')
    },
    onError(){
      this.$message.error('复制失败!')
    },
    setAssistant(item) {//助教设置
      this.dialogVisible = true;
      this.assistantForm.assistantImg = item.assistantImg
      this.assistantForm.assistantName = item.assistantName
      this.assistantForm.assistantTitle = item.assistantTitle
      this.assistantForm.assistantPwd = item.assistantPwd
      this.assistantForm.assistantNum = item.assistantNum
    },
    addAssistant(){//添加助教
      if(this.assistant.total==40){
        this.$message.error('助教添加数量已达上限')
        return
      }
      this.$postStream('/admin/instance/ccb/polyv/channel/assistant/add.do',{
        data:{
          appId: this.appId,
          channelId: this.channelId
        },
        success: res=> {
          if(res.success){
            this.$message.success('添加助教成功!')
            this.assistantList()
          }else{
            res.code == 50001?this.$message.error(res.message):this.$message.error('添加失败')
          }
        }
      })
    },
    delAssistant(item) {// 删除助教
      this.$confirm('此操作将永久删除该助教, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$postStream('/admin/instance/ccb/polyv/channel/assistant/delete.do',{
          data:{
            account: item.assistantNum,
            appId: this.appId,
            channelId: this.channelId,
          },
          success:res=>{
            if(res.success){
              this.$message.success('删除成功!')
              this.assistantList()
            }else{
              res.code == 50001?this.$message.error(res.message):this.$message.error('添加失败')
            }
          }
        })
      })
    },
    updateAssistant(){// 更新助教
      if(!this.assistantForm.assistantName.trim()){
        this.$message.error('昵称不能为空')
        return
      }
      if(!this.assistantForm.assistantTitle.trim()){
        this.$message.error('头衔不能为空')
        return
      }
      if(!this.assistantForm.assistantPwd.trim()){
        this.$message.error('密码不能为空')
        return
      }else if(!this.$utils.identifyPwd(this.assistantForm.assistantPwd)){
        this.$message.error('密码长度为5~16，英文数字下划线')
        return
      }
     
      this.$postStream('/admin/instance/ccb/polyv/channel/assistant/update.do',{
        data:{
          account: this.assistantForm.assistantNum,
          actor: this.assistantForm.assistantTitle,
          appId: this.appId,
          channelId: this.channelId,
          nickname: this.assistantForm.assistantName,
          password: this.assistantForm.assistantPwd,
          avatar: this.assistantForm.assistantImg
        },
        success:res=>{
          if(res.success){
             this.dialogVisible = false
             this.$message.success('修改成功!')
             this.assistantList()
          }else{
            res.code == 50001?this.$message.error(res.message):this.$message.error('添加失败')
          }
        }
      })
    },
    assistantList(page){ //助教列表
      this.assistant.isLoading = true
      this.$postStream('/admin/instance/ccb/polyv/channel/assistant/list.do',{
        data:{
          appId: this.appId,
          channelId: this.channelId,
          page:page||this.assistant.page,
          limit:this.assistant.size,
        },
        success: res=> {
          if(res.success){
            if(res.object.contents.length == 0 && (page||this.assistant.page) != 1){
              this.assistant.page = 1
              this.assistantList()
              return
            }
            this.assistant.page = page||this.assistant.page
            this.assistant.total=res.object.totalItems
            this.assistant.list=res.object.contents.map(element=>{
              return{
                assistantImg: element.avatar,
                assistantPwd: element.passwd,
                assistantNum: element.account,
                assistantName: element.nickname,
                assistantTitle: element.actor,
                account:element.account,
                cname: element.cname+'/teacher.html?channelId=' + element.account
              }
            })
          }else{
            this.$message.error('获取助教失败!')
          }
        },
        complete: ()=>{
          this.assistant.isLoading = false
        }
      })
    },
    getTeacher(){//获取讲师
      this.$postStream('/admin/instance/ccb/polyv/channel/teacher/get.do',{
        data:{
          appId: this.appId,
	        channelId: this.channelId
        },
        success:res=>{
          if(res.success){
            this.lecturer = [{
              lecturerImg:res.object.avatar,
              lecturerNum:res.object.account,
              lecturerName:res.object.nickname,
              lecturerTitle:res.object.actor,
              lecturerPwd:res.object.passwd
            }]
          }else{
            this.$message.error('获取教师失败')
          }
        }
      })
    },
    changeTeacher(item){
      this.dialogVisible2 = true
      this.lecturerForm.lecturerImg=item.lecturerImg
      this.lecturerForm.lecturerPwd=item.lecturerPwd
      this.lecturerForm.lecturerName=item.lecturerName
      this.lecturerForm.lecturerTitle=item.lecturerTitle
    },
    setTeacher(){//讲师设置
      if(!this.lecturerForm.lecturerName.trim()){
        this.$message.error('昵称不能为空')
        return
      }

      if(!this.lecturerForm.lecturerTitle.trim()){
        this.$message.error('头衔不能为空')
        return
      }

      if(!this.lecturerForm.lecturerPwd.trim()){
        this.$message.error('密码不能为空')
        return
      }else if(!this.$utils.identifyPwd(this.lecturerForm.lecturerPwd)){
        this.$message.error('密码长度为5~16，英文数字下划线')
        return
      }
      this.loading = true
      this.$postStream('/admin/instance/ccb/polyv/channel/teacher/update.do',{
        data:{
          appId: this.appId,
          channelId: this.channelId,
          actor: this.lecturerForm.lecturerTitle,
          avatar: this.lecturerForm.lecturerImg,
          nickname:this.lecturerForm.lecturerName,
          passwd: this.lecturerForm.lecturerPwd
        },
        success:res=>{
          if(res.success){
            this.$message.success('设置成功!')
            this.dialogVisible2 = false
            this.getTeacher()
          }else{
            res.code == 50001?this.$message.error(res.message):this.$message.error('添加失败')
          }
        },
        complete: ()=>{
          this.loading = false
        }
      })
    },
    openUrl(item){
      let url = this.$utils.getUrl(window.location.origin + '/admin/instance/ccb/polyv/channel/assistant/loginForOne.do',{
        accountId:item.account,
        appId: this.appId,
        'session-key': JSON.parse(sessionStorage.getItem('UserInfo')).sessionKey
      })
      this.$utils.linkTo(url)
    }
  },
  mounted() {
    this.channelId = sessionStorage.getItem('channelId')
    this.appId = sessionStorage.getItem('appId')
    this.assistantList()
    this.getTeacher()
  }
}
</script>

<style lang="scss" scoped>
.liverole {
  .set {
    margin: 0 auto;
    width: 300px;
  }
  .teacher-img{
    width: 40px;
    height: 40px;
  }
  .liberole-img{
    width: 40px;
    height: 40px;
    margin: 12px 0;
  }
  .head-img{
    position: absolute;
    height: 40px;
    line-height: 40px;
    top: 0;
    left: 35px;
  }
}
</style>
